<template>
  <view class="margin-sm">
    <use-navbar title="搜索"></use-navbar>

    <!-- 搜索内容区 -->
    <view
      class="search-area margin-bottom-sm pos-r w-full dflex-b border-radius-big margin-top-sm"
    >
      <view class="dflex-c flex1">
        <view class="icon-search pos-a">
          <text class="iconfont iconsousuo-01"></text>
        </view>
        <input
          type="text"
          class="dflex-col-c padding-left w-full padding-tb-xs box-sizing-b"
          maxlength="20"
          style="border-top-right-radius: 0; border-bottom-right-radius: 0"
          focus
          placeholder="请输入关键字"
          v-model="keyword"
        />
      </view>

      <view class="bg-base padding-tb-16 padding-lr-lg" @click="gotoChaoshi"
        >搜索</view
      >
    </view>

    <!-- 搜索历史区 -->
    <view
      class="padding padding-bottom-xs pos-r w-full margin-bottom-sm bg-main border-radius"
      v-if="historyDatas && historyDatas.length > 0"
    >
      <view class="padding-bottom-sm dflex-b">
        <view class="dflex margin-left-sm">
          <text class="fwb ft-dark">搜索历史</text>
        </view>
        <view
          class="iconfont iconlajitong-01 pos-a pos-right dflex-c ft-dark padding"
        ></view>
      </view>
      <view class="dflex dflex-wrap-w">
        <view
          class="item margin-right-sm margin-bottom-sm dflex bg-drak border-radius-lg padding-tb-xs padding-lr"
          v-for="(item, index) in historyDatas"
          :key="index"
        >
          <text class="clamp" style="max-width: 25vw">{{ item.keyword }}</text>
        </view>
      </view>
    </view>
    <!-- 热门搜索区 -->
    <view
      class="padding w-full bg-main padding-bottom-xs border-radius"
      v-if="hotDatas && hotDatas.length > 0"
    >
      <view class="padding-bottom-sm dflex-b">
        <view class="dflex margin-left-sm">
          <text class="fwb ft-dark">热门搜索</text>
        </view>
      </view>
      <view class="dflex dflex-wrap-w">
        <view
          @click="selectHotItem(item)"
          class="item margin-right-sm margin-bottom-sm dflex bg-drak border-radius-lg padding-tb-xs padding-lr"
          v-for="(item, index) in hotDatas"
          :key="index"
        >
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ikz from "@/pages/Common/tools.js";
export default {
  data() {
    return {
      // 搜索关键字
      keyword: "",

      // 历史搜索
      historyDatas: [],
      // 热门搜索
      hotDatas: [],
    };
  },
  onLoad() {
    this.getClassification();
  },
  methods: {
    selectHotItem(item) {
      this.keyword = item.text;
    },
    gotoChaoshi() {
      uni.navigateTo({
        url: `/pages/Home/chaoshi?keyword=${this.keyword}`,
      });
    },
    // 获取商品分类
    getClassification: function () {
      // 显示加载提示
      uni.showLoading({
        mask: true,
      });
      var path = "/xyb/supermarket/goods/category";
      var data = {};
      ikz.get(path, data, (res) => {
        if (res.data.code) {
          // 假设响应数据中分类信息在 res.data.data 数组中，每个元素包含 id 和 name
          this.hotDatas = res.data.data.map((item) => ({
            value: item.id,
            text: item.name,
          }));
        }
        // 隐藏加载提示
        uni.hideLoading();
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f5f5f5;
}

.search-area {
  input {
    padding-left: 80rpx;
    height: 76rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }

  .icon-search {
    top: 50%;
    left: 30rpx;
    transform: translate(0, -50%);
    z-index: 1;

    text {
      color: #c0c0c0;
    }
  }
}
</style>
